<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Capacitor Next — Think k9s, but in the browser.</title>
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="alternate icon" href="favicon.svg">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Capacitor Next">
  <meta property="og:title" content="Capacitor Next — Think k9s, but in the browser.">
  <meta property="og:description" content="Or ArgoCD UI, but for FluxCD.">
  <meta property="og:image" content="https://gimlet.io/capacitor-next/social.svg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Capacitor Next — Think k9s, but in the browser.">
  <meta name="twitter:description" content="Or ArgoCD UI, but for FluxCD.">
  <meta name="twitter:image" content="https://gimlet.io/capacitor-next/social.svg">
  <link rel="stylesheet" href="product.css">
  <link rel="stylesheet" href="synth.css">
</head>
<body>
  <div class="scanlines" aria-hidden="true"></div>
  <main class="container">
    <header class="hero">
      <section class="synth" aria-label="Mini synthesizer">
        <div class="synth-module synth-module--oscillator">
          <div class="synth-module-header">Flux</div>
          <div class="synth-module-body">
            <div class="synth-row">
              <button class="synth-button synth-wave-button" data-wave="sine" type="button">
                <span class="synth-wave-icon" aria-hidden="true">
                  <svg viewBox="0 0 40 16" focusable="false" aria-hidden="true">
                    <path d="M1 8 C 7 0, 13 0, 19 8 S 31 16, 37 8" />
                  </svg>
                </span>
                <span class="synth-wave-label">Sine</span>
              </button>
              <button class="synth-button synth-wave-button synth-wave-button--active" data-wave="square" type="button">
                <span class="synth-wave-icon" aria-hidden="true">
                  <svg viewBox="0 0 40 16" focusable="false" aria-hidden="true">
                    <path d="M1 14 V2 H14 V14 H27 V2 H37" />
                  </svg>
                </span>
                <span class="synth-wave-label">Square</span>
              </button>
              <button class="synth-button synth-wave-button" data-wave="sawtooth" type="button">
                <span class="synth-wave-icon" aria-hidden="true">
                  <svg viewBox="0 0 40 16" focusable="false" aria-hidden="true">
                    <path d="M1 14 L13 2 L13 14 L25 2 L25 14 L37 2" />
                  </svg>
                </span>
                <span class="synth-wave-label">Saw</span>
              </button>
            </div>
            <label class="synth-knob">
              <span class="synth-knob-label">Pitch</span>
              <span class="synth-knob-wrapper">
                <input
                  class="synth-knob-input"
                  type="range"
                  min="0"
                  max="1"
                  step="0.01"
                  value="0.5"
                  id="synthPitch"
                  aria-label="Oscillator pitch"
                />
                <span class="synth-knob-indicator" data-knob-indicator></span>
              </span>
              <span class="synth-knob-value" id="synthPitchValue">220 Hz</span>
            </label>
          </div>
        </div>
        <div class="synth-module synth-module--filter">
          <div class="synth-module-header">Capacitor</div>
          <div class="synth-module-body">
            <label class="synth-knob">
              <span class="synth-knob-label">Cutoff</span>
              <span class="synth-knob-wrapper">
                <input
                  class="synth-knob-input"
                  type="range"
                  min="0"
                  max="1"
                  step="0.01"
                  value="0.87"
                  id="synthFilterFrequency"
                  aria-label="Filter cutoff frequency"
                />
                <span class="synth-knob-indicator" data-knob-indicator></span>
              </span>
              <span class="synth-knob-value" id="synthFilterFrequencyValue">1.2 kHz</span>
            </label>
            <label class="synth-knob synth-knob--lfo">
              <span class="synth-knob-label">LFO</span>
              <span class="synth-knob-wrapper">
                <input
                  class="synth-knob-input"
                  type="range"
                  min="0"
                  max="1"
                  step="0.01"
                  value="0"
                  id="synthLfoRate"
                  aria-label="LFO rate"
                />
                <span class="synth-knob-indicator" data-knob-indicator></span>
              </span>
              <span class="synth-knob-value" id="synthLfoRateValue">Off</span>
              <span class="synth-lfo-indicator" data-synth-lfo-indicator aria-hidden="true"></span>
            </label>
            <label class="synth-knob">
              <span class="synth-knob-label">LFO Depth</span>
              <span class="synth-knob-wrapper">
                <input
                  class="synth-knob-input"
                  type="range"
                  min="0"
                  max="1"
                  step="0.01"
                  value="0.45"
                  id="synthLfoDepth"
                  aria-label="LFO depth"
                />
                <span class="synth-knob-indicator" data-knob-indicator></span>
              </span>
              <span class="synth-knob-value" id="synthLfoDepthValue">45%</span>
            </label>
          </div>
        </div>
        <div class="synth-module synth-module--scope">
          <div class="synth-module-body">
            <canvas
              id="synthScope"
              class="synth-scope-canvas"
              width="360"
              height="140"
              aria-label="Waveform and harmonics oscilloscope"
            ></canvas>
          </div>
        </div>
          <div class="synth-module-body">
            <button class="synth-button synth-mute-button" id="synthMuteButton" type="button" aria-label="Toggle mute" data-muted="true">
              <svg class="synth-mute-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M11 5L6 9H2v6h4l5 4V5z"/>
                <path class="synth-mute-icon-x" d="M19 9l-6 6M13 9l6 6" opacity="1"/>
              </svg>
            </button>
          </div>
      </section>
      <p class="synth-note">...because synths are fun. And AI is cheap.</p>
      <div class="glitch-container">
        <svg class="christmas-tree" viewBox="0 0 32 38" fill="none">
          <!-- Tree triangles -->
          <path d="M16 2 L9 12 L23 12 Z" fill="#2d5016" stroke="#1a3009" stroke-width="1"/>
          <path d="M16 8 L7 20 L25 20 Z" fill="#2d5016" stroke="#1a3009" stroke-width="1"/>
          <path d="M16 14 L5 28 L27 28 Z" fill="#2d5016" stroke="#1a3009" stroke-width="1"/>
          <!-- Trunk -->
          <rect x="13" y="28" width="6" height="8" fill="#4a3228" stroke="#2d1e18" stroke-width="1"/>
          <!-- Lights -->
          <circle class="light light-1" cx="12" cy="11" r="1.2" fill="#ff4444"/>
          <circle class="light light-2" cx="20" cy="13" r="1.2" fill="#4444ff"/>
          <circle class="light light-3" cx="14" cy="18" r="1.2" fill="#ffd700"/>
          <circle class="light light-4" cx="18" cy="21" r="1.2" fill="#44ff44"/>
          <circle class="light light-5" cx="10" cy="24" r="1.2" fill="#ff44ff"/>
          <circle class="light light-6" cx="22" cy="25" r="1.2" fill="#44ffff"/>
        </svg>
        <h1 class="glitch" data-text="Capacitor Next">Capacitor Next</h1>
        <svg class="christmas-tree" viewBox="0 0 32 38" fill="none">
          <!-- Tree triangles -->
          <path d="M16 2 L9 12 L23 12 Z" fill="#2d5016" stroke="#1a3009" stroke-width="1"/>
          <path d="M16 8 L7 20 L25 20 Z" fill="#2d5016" stroke="#1a3009" stroke-width="1"/>
          <path d="M16 14 L5 28 L27 28 Z" fill="#2d5016" stroke="#1a3009" stroke-width="1"/>
          <!-- Trunk -->
          <rect x="13" y="28" width="6" height="8" fill="#4a3228" stroke="#2d1e18" stroke-width="1"/>
          <!-- Lights -->
          <circle class="light light-1" cx="12" cy="11" r="1.2" fill="#ff4444"/>
          <circle class="light light-2" cx="20" cy="13" r="1.2" fill="#4444ff"/>
          <circle class="light light-3" cx="14" cy="18" r="1.2" fill="#ffd700"/>
          <circle class="light light-4" cx="18" cy="21" r="1.2" fill="#44ff44"/>
          <circle class="light light-5" cx="10" cy="24" r="1.2" fill="#ff44ff"/>
          <circle class="light light-6" cx="22" cy="25" r="1.2" fill="#44ffff"/>
        </svg>
      </div>
      <p class="tagline">Think k9s, but in the browser. Or ArgoCD UI, but for FluxCD.</p>
      <div class="cta">
        <a class="btn btn-primary" href="./docs/">Docs</a>
        <a class="btn btn-yellow" href="./changelog/" target="_blank">Changelog</a>
        <a class="btn btn-ghost" href="https://github.com/gimlet-io/capacitor" target="_blank">✨ Github</a>
      </div>
      <div class="terminal">
        <code><span class="prompt">$ </span>wget -qO- https://gimlet.io/install-capacitor | bash</code>
        <button id="copyCmd" class="copy" aria-label="Copy install command">Copy</button>
      </div>
    </header>
    <section id="features" class="features">
      <div class="feature">
        <div class="icon" aria-hidden="true">⟳</div>
        <h3>FluxCD</h3>
        <p>Tree view, diffing cluster vs git state.</p>
      </div>
      <div class="feature">
        <div class="icon" aria-hidden="true">⎈</div>
        <h3>Helm</h3>
        <p>History, rollback, diffing.</p>
      </div>
      <div class="feature">
        <div class="icon" aria-hidden="true">◇</div>
        <h3>Secrets</h3>
        <p>View, edit, create.</p>
      </div>
      <div class="feature">
        <div class="icon" aria-hidden="true">⌘</div>
        <h3>Keyboard Navigation</h3>
      </div>
      <div class="feature">
        <div class="icon" aria-hidden="true">⚖</div>
        <h3>Respects RBAC</h3>
        <p>Uses your kubeconfig. If you self-host, it uses OIDC impersonation.</p>
      </div>
      <div class="feature">
        <div class="icon" aria-hidden="true">⧉</div>
        <h3>Multi-cluster</h3>
      </div>
      <div class="feature">
        <div class="icon" aria-hidden="true">⬚</div>
        <h3>Your feature</h3>
        <p>Request a feature on <a href="https://github.com/gimlet-io/capacitor/issues" target="_blank" class="dim">Github</a></p>
      </div>
    </section>

    <section id="buy" class="pricing">
      <div class="card">
        <h2>Self-host for your team<br /> - beta testers wanted</h2>
        <!-- <p class="price"><span class="currency">$</span>29<span class="term">/mo</span></p> -->
        <ul class="list">
          <li>OIDC-based authentication (or fixed roles)</li>
          <li>Multi-cluster support</li>
          <li>Self-hosting</li>
          <li>Backstage/IDP integration</li>
        </ul>
        <a class="btn btn-primary wide" href="mailto:laszlo@gimlet.io">Message laszlo at gimlet.io</a>
      </div>
    </section>

    <footer class="footer">
      <p><span class="mono">✨ Github: </span> <a href="https://github.com/gimlet-io/capacitor" target="_blank" class="dim">https://github.com/gimlet-io/capacitor</a></p>
      <p><span class="mono">X: </span> <a href="https://x.com/laszlocph" target="_blank" class="dim">@laszlocph</a></p>
    </footer>
  </main>

  <script src="product.js"></script>
  <script src="synth.js"></script>
</body>
</html>

